<template>
  <div id="app">
    <NavBar v-if="!hideNavBar"/> <!-- 引入导航栏组件 -->
    <router-view></router-view>
    <FooterBar v-if="!hideNavBar" />
  </div>
</template>

<script setup lang="ts" name="App">
import { onMounted, onUnmounted, computed } from 'vue'; // 确保引入 computed
import { saveItem } from '@/util/storageUtil';
import { STORAGE_USER_INFO_KEY, STORAGE_USER_TOKEN_KEY } from '@/config/constants';
import { useUserStore } from '@/store/useUserStore';
import NavBar from "@/components/NavBar.vue";
import { useRoute } from "vue-router";
import FooterBar from "@/components/FooterBar.vue";

const route = useRoute();
const hideNavBar = computed(() => route.meta.hideNavBar); // 计算当前路由是否隐藏 NavBar

let userStore = useUserStore();

function toStorage() {
  saveItem(STORAGE_USER_INFO_KEY, userStore.userInfo);
  saveItem(STORAGE_USER_TOKEN_KEY, userStore.token);
}

onMounted(() => {
  window.addEventListener("beforeunload", toStorage);
});

onUnmounted(() => {
  window.removeEventListener("beforeunload", toStorage);
});
</script>

<style>
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
